<template>
    <div class="app-container" id="main"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            // A数据
            neighData: [],
            queryInfoA: {
                currPage: 1,
                pageNum: 4,
                unitname: "A",
            },
            //   B数据
            neighDataB: [],
            queryInfoB: {
                currPage: 1,
                pageNum: 4,
                unitname: "B",
            },
            //   C数据
            neighDataC: [],
            queryInfoC: {
                currPage: 1,
                pageNum: 4,
                unitname: "C",
            },
            //   D数据
            neighDataD: [],
            queryInfoD: {
                currPage: 1,
                pageNum: 4,
                unitname: "D",
            },
        };
    },
    mounted() {
        this.getEchartsDataA();
    },
    methods: {
        async getEchartsDataA() {
            let res = await this.$axios({
                url: "/house/searchList",
                methods: "get",
                params: this.queryInfoA,
            });
            //   console.log(res);
            this.neighData = res.data.total;

            //   B数据
            let resB = await this.$axios({
                url: "/house/searchList",
                methods: "get",
                params: this.queryInfoB,
            });
            //   console.log(resB);
            this.neighDataB = resB.data.total;

            //   C数据
            let resC = await this.$axios({
                url: "/house/searchList",
                methods: "get",
                params: this.queryInfoC,
            });
            this.neighDataC = resC.data.total;

            //   D数据
            let resD = await this.$axios({
                url: "/house/searchList",
                methods: "get",
                params: this.queryInfoD,
            });
            this.neighDataD = resD.data.total;
            // 绘制图表
            this.echartsInit();
        },
        echartsInit() {
            echarts.init(document.getElementById("main")).setOption({
                color: ["#F5DE6C", "#D8ECFF", "#339DFF", "#B0F5AA"],
                title: {
                    text: "小区分布统计",
                    left: "center",
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                },
                series: [
                    {
                        name: "Access From",
                        type: "pie",
                        radius: "50%",
                        data: [
                            { value: this.neighData, name: "A栋" + this.neighData },
                            { value: this.neighDataB, name: "B栋" + this.neighDataB },
                            { value: this.neighDataC, name: "C栋" + this.neighDataC },
                            { value: this.neighDataD, name: "D栋" + this.neighDataD },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container::v-deep {
    //   padding: 20px;
    width: 100%;
    height: 350px;
}
</style>
